<template>
  <div>
    <a-modal title="修改地址" :visible="visible" @before-open="open" @cancel="handleCancel" :align-center="false" title-align="start" width="600px" :mask-closable="false">
      <div>
        <a-form auto-label-width ref="formRef" size="medium" :model="form">
          <a-space direction="vertical" :size="24">
            <a-row>
              <a-col :span="12">
                <a-form-item field="userName" label="收货人" :rules="rules.userName">
                  <a-input v-model="form.userName" placeholder="请输入收货人名称"></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item field="phoneNumber" label="手机号" :rules="rules.phoneNumber">
                  <a-input v-model="form.phoneNumber" placeholder="请输入手机号"></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item field="country" label="国家" :rules="rules.country">
                  <a-select v-model="form.country" placeholder="请选择" @change="changeCountry" allow-clear allow-search>
                    <a-option v-for="item of countriesOptions" :label="item.name" :value="item.name"></a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item field="postalCode" label="邮编" :rules="rules.postalCode">
                  <a-input v-model="form.postalCode" placeholder="请输入备注名"></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item field="stateOrRegion" label="省/州" :rules="rules.stateOrRegion">
                  <a-input v-model="form.stateOrRegion" placeholder="请输入省/州"></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item field="stateOrRegionCode" label="省州编码" :rules="rules.stateOrRegionCode">
                  <a-input v-model="form.stateOrRegionCode" placeholder="请输入省州编码"></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item field="city" label="城市" :rules="rules.city">
                  <a-input v-model="form.city" placeholder="请输入城市名称"></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item field="address" label="地址1" :rules="rules.address">
                  <a-input v-model="form.address" placeholder="请输入城市名称"></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item field="city" label="地址2">
                  <a-input v-model="form.address1" placeholder="请输入城市名称"></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item field="city" label="地址3">
                  <a-input v-model="form.address2" placeholder="请输入城市名称"></a-input>
                </a-form-item>
              </a-col>
            </a-row>
          </a-space>
        </a-form>
      </div>

      <template #footer>
        <a-button class="gray-outline" @click="handleCancel">取消</a-button>
        <a-button type="primary" :loading="loading" class="ml10" @click="handleOk">确认</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { updateLocationRemarkBatch } from '@/api/warehouse'
  import { getOrderDetail, updateOrderAddress, updateOrderAddressLock } from '@/api/order'
  import { Message } from '@arco-design/web-vue'
  import { countriesOptions } from '@/utils/countries'
  export default defineComponent({
    props: ['info'],
    setup(props: any, { emit }) {
      let visible = ref(false)
      const formRef = ref()
      const data: any = reactive({
        form: {},
        rules: {
          userName: [{ required: true, message: '请输入收货人名称' }],
          phoneNumber: [{ required: true, message: '请输入用户手机号' }],
          country: [{ required: true, message: '请选择国家' }],
          postalCode: [{ required: true, message: '请输入邮编' }],
          stateOrRegion: [{ required: true, message: '请输入省/州' }],
          stateOrRegionCode: [{ required: true, message: '请输入省州编码' }],
          city: [{ required: true, message: '请输入城市名称' }],
          address: [{ required: true, message: '请输入地址' }],
        },
        loading: false,
        countriesOptions: countriesOptions,
      })

      const open = () => {
        console.log(props.info)
        data.form = props.info?.address || {}
      }
      const handleOk = () => {
        formRef.value.validate(async (valid: any) => {
          if (!valid) {
            let params: any = data.form
            params.orderId = props.info.id
            const res: any = await updateOrderAddress(params)
            if (res.code == 'SUCCESS') {
              data.form = {}
              Message.success('修改成功')
              visible.value = false
              emit('save')
            }
          }
        })
      }
      const handleCancel = () => {
        visible.value = false
      }
      const changeCountry = (val: string) => {
        let obj: any = countriesOptions.find((e) => e.name == val)
        data.form.countryCode = obj.short
      }

      return {
        ...(toRefs(data) as any),
        visible,
        formRef,
        open,
        handleOk,
        handleCancel,
        changeCountry,
      }
    },
  })
</script>

<style lang="less" scoped></style>
